import { Component, use } from 'react'
const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject([1,2,3,4])
  }, 3000);
})

class ErrorBoundry extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hasError: false,
      error: null
    }
  }
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  render() {
    if(this.state.hasError) {
      return <div>Error: {this.state.error}</div>
    }
    return this.props.children
  }
  
}
function FetchData() {
  // fetchData 需要是一个promise  如果是一个函数返回一个promise，得保证两次执行的promise是同一个 
  const data = use(fetchData)
  return <div>{data}</div>
}

function App() {
  return <ErrorBoundry><FetchData /></ErrorBoundry>
}



export default App